<template>
  <div class="page-container" v-loading="loading">
    <template v-if="!loading">
      <div class="page-container-email-detail">
        <el-descriptions size="medium" :column="4">
          <el-descriptions-item :label="t('im.imChat.components.mailChat.text1')">{{ detailInfo.serialnumber }}</el-descriptions-item>
          <el-descriptions-item :label="t('common.bizComponents.bizSendEmail.label.subject')">{{ detailInfo.emailSubject }}</el-descriptions-item>
          <el-descriptions-item :label="t('common.label.email')">{{ detailInfo.email }}</el-descriptions-item>
          <el-descriptions-item :label="t('common.label.customerName')">{{ detailInfo.customerName }}</el-descriptions-item>
          <el-descriptions-item :label="t('common.label.contact')">{{ detailInfo.linkmanName }}</el-descriptions-item>
          <el-descriptions-item :label="t('common.label.phone')">{{ detailInfo.phone }}</el-descriptions-item>
          <el-descriptions-item :label="t('common.label.address')">{{ detailInfo.address }}</el-descriptions-item>
          <el-descriptions-item :label="t('im.imChat.components.mailChat.text2')">{{ formatDate(detailInfo.sentDate) }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="page-container-message-detail" v-hijackJump>
        <!-- 当前邮件 -->
        <MailDetailItem :detail-info="detailInfo" />
        <!-- 历史邮件 -->
        <div class="history-info">
          <span class="text">{{ t('im.imChat.components.mailChat.text4') }}</span>
        </div>
        <div class="history-list">
          <template v-if="historyList.length > 0">
            <MailDetailItem v-for="(v, i) in historyList" :key="i" :detail-info="v" />
          </template>
          <template v-else>
            <BaseListForNoData v-show="!loading" :notice-msg="$t('common.base.tip.noData')"></BaseListForNoData>
          </template>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
/** vue */
import { defineComponent, getCurrentInstance, reactive, toRefs, onMounted } from 'vue';
/** api */
import * as ImApi from '@src/api/ImApi.js';
/** element-ui */
import { Message } from 'element-ui';
/** util */
import { formatDate } from 'pub-bbx-utils';
import { t } from '@src/locales';
/** components */
import MailDetailItem from '@src/modules/im/components/MailDetailItem.vue';
/** directives */
import { hijackJump } from '@src/modules/im/tools/directives.js'

export default defineComponent({
  name: 'MailManagementDetail',
  components: {
    MailDetailItem,
  },
  directives: {
    hijackJump,
  },
  setup() {
    const $vm = getCurrentInstance();
    const emailInfoId = $vm.proxy.$route.query.id;
    const state = reactive({
      loading: true,
      detailInfo: {},
      historyList: [],
    });

    async function getEmailInfo() {
      try {
        const { code, data, message } = await ImApi.getEmailInfo({ emailInfoId });
        if (code == 0) {
          state.detailInfo = data ?? {};
        } else {
          Message.error(message);
        }
      } catch (error) {
        return Promise.resolve();
      }
    }

    async function getEmailHistoryList() {
      try {
        const { code, data, message } = await ImApi.getEmailHistoryList({ emailInfoId });
        if (code == 0) {
          state.historyList = data || [];
        } else {
          Message.error(message);
        }
      } catch (error) {
        return Promise.resolve();
      }
    }

    async function init() {
      try {
        state.loading = true;
        await Promise.all([getEmailInfo(), getEmailHistoryList()]);
      } catch (error) {
        console.error(error);
      } finally {
        state.loading = false;
      }
    }

    onMounted(() => {
      init();
    });

    return {
      ...toRefs(state),
      formatDate,
      t,
    };
  },
});
</script>
<style lang="scss" scoped>
.page-container {
  display: flex;
  flex-flow: column;
  overflow: hidden;
  height: 100%;
  padding: 12px;

  &-email-detail {
    background-color: #ffffff;
    padding: 12px 16px;
    border-radius: 4px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-wrap: wrap;

    .form-view-row {
      label {
        width: auto;
      }

      width: 25%;
      flex-shrink: 1;
    }
  }

  &-message-detail {
    margin-top: 12px;
    height: 0;
    flex: 1;
    overflow-y: auto;
    background-color: #ffffff;
    padding: 12px 16px;
    border-radius: 4px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);

    .history-info {
      width: 100%;
      text-align: center;
      padding: 30px 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      .text {
        padding: 0 10px;
      }
      &:before,
      &:after {
        content: '';
        flex: 1 1;
        border-bottom: 1px dashed #000;
      }
    }

    .history-list {
      ::v-deep .mail-container-message-detail-item {
        margin-bottom: 16px;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>
